<template>
    <div class="container">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>状态管理</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="tool">
            <!-- 搜索列表 -->
            <div class="search">
            <el-button type="success" @click="searchAll" style="margin-right: 10px;">查询所有</el-button>
            <el-date-picker
                v-model="queryParmas.queryDate"
                type="date"
                placeholder="选择日期"
                :disabled-date="disabledDate"
            />
            <el-button type="primary" @click="toSearch" class="query">日期查询</el-button>
          </div>
          <!-- 数据下载 -->
          <div class="downloadExe">
            <el-select v-model="queryParmas.queryType" class="m-2" placeholder="选择一种状态进行查询">
             <el-option v-for="(item,index) in labelList" :value="item.value" :label="item.label" :key="index">
            </el-option>
            </el-select>
            <el-button type="success" :icon="Search" style="margin-left: 10px;" @click="download"></el-button>
          </div>
        </div>
   
        <!-- 数据列表 -->
        <div class="table">
            <el-table 
            :data="stateList"
            border 
            stripe
        >
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column width="160px">
                    <template #header>
                        运行时间
                    </template>
                    <template #default="{row}">
                        {{ filterDate(row.createdAt)  }}
                    </template>
                </el-table-column>
                <el-table-column label="模块编号" prop="module_id"></el-table-column>
                <el-table-column v-for="(item,index) in propList" :key="index" :prop="item.prop" :label="item.label" >
                    <template #default="{row}">
                        <el-tag class="ml-2" type="success" v-if="row[item.prop] == 0">正常</el-tag>
                        <el-tag class="ml-2" type="warning" v-else-if="row[item.prop] == 1">警告</el-tag>
                        <el-tag class="ml-2" type="error" v-else>报警</el-tag>
                    </template>
                </el-table-column>
           </el-table>
             <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="queryParmas.pageSize"
                :page-sizes="[10, 15, 20]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
    import {Search} from '@element-plus/icons-vue'
    import {onMounted,ref,reactive} from 'vue'
    import {getCurrentInstance} from 'vue'
    import tool from '../../until/tool'
    import { userStore } from '../../store/user'
    let store = userStore()
    let {proxy} = getCurrentInstance()
    let currentPage = ref(1)
    let options = reactive(null)
    let labelList = [
       
        {
            label: "正常",
            value: 0
        },
        {
            label: "警告",
            value: 1
        },
        {
            label: "报警",
            value: 2
        }
    ]
    let queryParmas = reactive({
        pageSize: 10,
        page: 1,
        queryDate: "",
        queryType: ''
    })
  
    let stateList = ref([])
    let total = ref<number>(0)
    let selectDate = ref<string>('')
    let propList = [
                {  
                    prop: "uvc_sta",
                    label: "紫外"
                },
                {
                    prop: "ir_sta",
                    label: "红外"
                }
                ,
                {
                    prop: "temp_sta",
                    label: "温度"
                },
                {
                    prop: "hum_sta",
                    label: "湿度"
                }
                ,
                {
                    prop: "pre_sta",
                    label: "压力"
                }
            ]
     // 对时间函数的过滤
     let filterDate = (date:Date) => {
        return new Date(date).toLocaleDateString().replace(/\//g,"-")+' ' + new Date(date).toLocaleTimeString()
     }   
     // 禁用日期
     const disabledDate = (time: Date) => {
         return time.getTime() > Date.now()
     }
    onMounted(async () => {
        getStateList()
        // 获取指定下载的日期
        let {data:res} = await proxy.$adminHttp.get("/admin/downLoadDate")
         options = res.data
    })

    const getStateList = async () => {
    let {data: res} = await proxy.$adminHttp.get("/admin/getStatusList",{
            params: queryParmas
    })
        total.value = res.data.total  //获取查询的总数
        stateList.value = res.data.data    // 数据列表
    }
    // 按照日期进行查询
   const toSearch = () => {
        if (queryParmas.queryDate === '') return proxy.notifyWarning("请选择查询的日期")
        queryParmas.queryDate = new Date(queryParmas.queryDate).toLocaleDateString().replace(/\//g,'-')
        getStateList()
    }
    
    const handleSizeChange = (val:number) => {
        queryParmas.pageSize = val
        getStateList()
    }

    const handleCurrentChange = (val:number) => {
        queryParmas.page = val
        getStateList()
    }
    // 查询所有数据
    const searchAll = () => {
        queryParmas.page = 1
        queryParmas.pageSize = 10
        queryParmas.queryDate = ''
        queryParmas.queryType = ''
        getStateList()
    }

    // 下载excel数据
    const download = async () => {
        if (queryParmas.queryType === '') return proxy.notifyWarning("请先选择报警得类型")
        getStateList()    
   }
</script>

<style lang="less" scoped>

.tool {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .search {
        margin-top: 20px;
        .add {
            margin-right: 10px;
        }
        .query {
            margin-left: 10px;
        }
     }
   }
     .table {
        margin-top: 10px;
     }
     .el-pagination {
        margin-top: 10px;
        display: flex;
        justify-content: center;
     }
</style>